﻿@model List<Tag>
@using LiteBlog
@{
    ViewBag.Title = "Manage Tags";
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
}

@section ScriptSection
{
    <script type="text/javascript">
        $(function () {
            var tags = new Tags();
            tags.loadJson(@Html.Json(Model));
            ko.applyBindings(tags, document.getElementById("main"));
        });
    </script>
}

<div id="main" class="hidden" data-bind="css: {hidden: false}">
    <h1>Tags</h1>
    <div>
        <input type="button" value="Create Tag" data-bind="click: add, enable: addEnable" />
    </div>
    <div class="success" data-bind="text: successMessage">
    </div>
    <div class="error" data-bind="html: errorMessage">
    </div>
    <table class="grid">
        <thead>
            <tr>
                <th style="width: 15%">Edit</th>
                <th style="width: 15%">Delete</th>
                <th style="width: 35%">Url Name</th>
                <th style="width: 35%">Display Name</th>
            </tr>
        </thead>
        <tbody data-bind="foreach: collection">
            <tr data-bind="visible: !isEdit(), css: { alternateRow: !isOdd() }">
                <td style="text-align: center"><a href="#" data-bind="click: edit">Edit</a></td>
                <td style="text-align: center"><a href="#" data-bind="click: remove">Delete</a></td>
                <td data-bind="text: name"></td>
                <td data-bind="text: displayName"></td>
            </tr>
            <tr data-bind="visible: isEdit, css: { 'editRow': isEdit }">
                <td></td>
                <td></td>
                <td>
                    <input type="text" name="name" data-bind="value: name, valueUpdate: 'afterkeydown', css: { 'errorBox': name.hasError }" />
                </td>
                <td>
                    <input type="text" name="displayName" data-bind="value: displayName, valueUpdate: 'afterkeydown', css: { 'errorBox': displayName.hasError }" />
                </td>
            </tr>
            <tr data-bind="visible: isEdit, css: { editRow: isEdit }">
                <td colspan="3"></td>
                <td style="text-align: right">
                    <a href="#" data-bind="click: update">Update</a>
                    <a href="#" data-bind="click: close">Close</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>